import { BaseTableModal } from "./base";
import BatchSuffixInput from "@/views/components/BatchSuffixInput";
import { Button, Input, Select } from "antd";

import request from "@/utils/request";
import { stringify } from "qs";
import CommonZjfImg from "@/views/components/CommonZjfImg";
import CommonStoreSearchInput from "@/views/components/CommonStoreSearchInput/index";
import { useState, useEffect } from "react";
import { renderCityOptions } from '@/utils/utils.jsx';

const cityOptions = renderCityOptions();

export async function getSupplierSpuList(params) {
	return request(`/blade-goods/zjfgoodscommon/list/fuzzyQueryGoodsCommonPage`, {
		method: "POST",
		loading: true,
		data: params
	});
}
export const SupplierSpuMatchModal = ({
	type = "simple",
	title = "供应商商品搜索",
	width = "945px",
	children,
	onOk,
	ids = []
}) => {
	const init = () => {};
	const tableRequest = getSupplierSpuList;

	function getCols(ids) {
		return [
			{
				name: "供应商名称",
				code: "storeName",
				width: 100,
				search: {
					order: 1,
					code: "storeIdCopy1",
					content: () => <CommonStoreSearchInput type="storeName" placeholder="请输入供应商名称" />
				}
			},
			{
				name: "城市",
				code: "siteCityName",
				width: 100,
				search: {
					order: 0,
					code: "cityName",
					content: () => (
						<Select placeholder="城市" options={cityOptions}></Select>
					)
				}
			},
			{
				name: "档口号",
				code: "shopCode",
				width: 200,
				search: {
					order: 1,
					code: "storeIdCopy2",
					content: () => <CommonStoreSearchInput type="shopCode" placeholder="请输入档口号" />
				}
			},
			{
				name: "商品信息",
				code: "spuInfo",
				width: 400,
				render: (_, record, i) => {
					return (
						<div className="flex">
							<CommonZjfImg img={record.goodsImage} storeId={record.storeId} />

							<div className="flex-column">
								<span>款式编码:{record.goodsCommonid}</span>
								<span>{record.goodsName}</span>
							</div>
						</div>
					);
				}
			},
			{
				name: "采购价",
				code: "goodsPrice",
				render: v => <span className="red">{v && `￥${Number(v).toFixed(2)}`}</span>,
			},
			{
				hidden: true,
				name: "商品名称",
				code: "spuName",
				search: {
					order: 2,
					code: "goodsNameList",
					content: () => (
						<BatchSuffixInput
							autoMultiLine
							allowClear
							clearable
							placeholder="商品名称，多个逗号隔开"
							message="多个商品名称， 每行输入1个内容，最多4个"
						/>
					)
				}
			},
			{
				hidden: true,
				name: "款式编码",
				code: "spuCode",
				search: {
					order: 3,
					code: "goodsCommonIdList",
					content: () => <BatchSuffixInput autoMultiLine allowClear clearable placeholder="款式编码，多个逗号隔开" />
				}
			},
			{
				name: "操作",
				code: "action",
				render: (v, r, i) => {
					console.log(ids, r);
					return ids.includes(r.goodsCommonid) ? (
						<Button type="text">已添加</Button>
					) : (
						<Button
							type="link"
							onClick={() => {
								onOk([r]);
							}}
						>
							添加
						</Button>
					);
				}
			}
		];
	}
	const [columns, setColumns] = useState(getCols(ids));
	useEffect(() => {
		setColumns(getCols(ids));
	}, [ids]);
	const beforeQuerySearch = ({ API_DATA }) => {
		const key = "storeId";
		const value = API_DATA["storeIdCopy1"] || API_DATA["storeIdCopy2"];
		delete API_DATA["storeIdCopy1"];
		delete API_DATA["storeIdCopy2"];
		API_DATA[key] = value;
		if (typeof API_DATA["goodsCommonIdList"] === "string") {
			API_DATA["goodsCommonIdList"] = API_DATA["goodsCommonIdList"].split(",");
		}

		if (typeof API_DATA["goodsNameList"] === "string") {
			API_DATA["goodsNameList"] = API_DATA["goodsNameList"].split(",");
		}

		return { ...API_DATA, size: API_DATA.pageSize, current: API_DATA.pageNum };
	};
	const SupplierSpuProps = {
		type,
		title,
		width,
		onOk,
		init,
		////
		tableKey: "supplierSpuModal2024-3-27 20:45:51",
		rowKey: "goodsCommonid",
		// ///
		columns,
		tableRequest,
		autoFetch: false,
		hasPagination: true,
		hasQuickSearch: false,
		beforeQuerySearch,
		resetSourceData: false,
		hasColsSetting: false,
		hasToggleSearchForm: false,
		columnResize: true,
		hasQueryLocation: false,
		searchSpan: 3,
		footer: <></>
	};

	return <BaseTableModal {...SupplierSpuProps}>{children}</BaseTableModal>;
};
